<template>
<div class="header" :class="[showHeader]">
<div class="header-back" :class="[showBack]"><span class="iconfont">&#xe641;</span></div>
<div class="header-search" :class="[showSearch]"><span  class="iconfont">&#xe688;</span>上海海昌海洋公园</div>
<router-link to="/location">
<div class="header-city" :class="[showCity]"><span class="iconfont">&#xe65d;</span>{{this.city}}</div></router-link>
</div>

</template>

<script>
export default {
  name: 'homeHeader',
  props:['city'],
  data(){
    return{
showHeader:'',
showBack:'',
showSearch:'',
showCity:''
      }
  },
  methods:{
scrollChange() {
    let height=document.documentElement.scrollTop
    //console.log(height)
    if(height>10){
       this.showHeader='showHeader'
        this.showBack='showBack'
         this.showSearch='showSearch'
          this.showCity='showCity'
    }else{
          this.showHeader=''
        this.showBack=''
         this.showSearch=''
          this.showCity=''
    }
}

},
mounted(){
window.addEventListener('scroll',this.scrollChange)
}
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.showHeader
  background:#fff

.header 
  line-height: .88rem
  text-align :center
  display:flex
  .header-back
    float left 
    width:.9rem
    .showBack
      color:#000
  .header-search
    flex:1
    border-radius:.5rem
    box-shadow:0 0 .01rem .02rem #005
    height:.60rem
    margin-top:.15rem
    line-height :.60rem
    color #333
    width 300rem
    background-color white
  .showSearch
    color:#aaa
    background:#eee
  .header-city
    float right
    width:.9rem
    color:white
   .showCity
    color:#000
</style>
